<template>
	<view class="content">
		<u-no-network></u-no-network>

		<view class="info shadow">
			<u-picker mode="selector" v-model="show" :range="selectorObj" range-key="name" @confirm="confirmSelection"></u-picker>
			<view class="info2" @click="openPiker">
				<text>分类</text>
				<input type="text" disabled="" v-model="classification" value="" placeholder="请选择分类 " class="inputStyle" />
			</view>
			<view class="info1 ">
				<text>设备名称</text>
				<input type="text" v-model="name" value="" placeholder="请输入设备名称" class="inputStyle" />
			</view>
			<view class="info2">
				<text>商品价格</text>
				<input type="digit" v-model="price" value="" placeholder="请输入商品价格" class="inputStyle" />
			</view>
			<view class="info2">
				<text>划线价格</text>
				<input type="digit" v-model="lineation" value="" placeholder="请输入划线价格 " class="inputStyle" />
			</view>
			<view class="info2">
				<text>简介</text>
				<input type="text" v-model="brief" value="" placeholder="请输入简介 " class="inputStyle" />
			</view>

			<view class="info2">
				<text>库存</text>
				<input type="number" v-model="inventory" value="" placeholder="请输入库存 " class="inputStyle" />
			</view>
		</view>
		<view class="shop shadow">
			<text>封面图</text>
			<u-upload
				ref="uUpload"
				max-count="2"
				:action="action"
				:auto-upload="true"
				@on-success="success"
				width="190rpx"
				height="190rpx"
				multiple
				:file-list="fileList"
			></u-upload>
		</view>

		<view class="shop shadow">
			<view class="info2">
				<text>详情</text>
				<textarea
					type="text"
					v-model="content"
					value=""
					placeholder="请输入详情 "
					class="inputStyle padding r margin-top"
					style="width: 100%; border: 1rpx solid #f5f8fd;"
				/>
			</view>
			<u-upload
				ref="uUpload"
				:action="action"
				:auto-upload="true"
				@on-success="success1"
				width="190rpx"
				height="190rpx"
				multiple
				:file-list="fileList1"
			></u-upload>
		</view>

		<view class="applyToSettleIn">
			<button type="default " :loading="isLoading" @click="id ? addingGoods(2) : addingGoods(1)">{{ id ? '确认修改' : '确认上传' }}</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLoading: false,
			action: 'https://wumei.qianjitianxia.com/api/upload/upload',
			show: false,

			selectorObj: [],
			classification: '',
			fid: '',
			name: '',
			brief: '',
			content: '',
			price: '',
			lineation: '',
			cover: '',
			inventory: '',
			id: '',
			content_img: [],
			fileList: [],
			fileList1: [],
		};
	},

	onLoad(e) {
		e && (this.id = e.id);
		this.getShop(e.id);
		console.log('this.id :>> ', this.id);
		this.getClassification();
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
		});
	},
	methods: {
		/* 获取店铺 */
		async getShop(eid) {
			let obj = {
				eid,
			};
			const res = await this.$u.post('api/shop/get_goods', obj, {});

			console.log('获取店铺 >>  ', res);
			this.name = res.data.name;
			this.price = res.data.price;
			this.lineation = res.data.lineation;
			this.brief = res.data.brief;
			this.content = res.data.content;
			this.inventory = res.data.inventory;
			if (res.data.cover) {
				this.fileList = [
					{
						url: res.data.cover,
					},
				];
			}
			if (res.data.content_img) {
				res.data.content_img.forEach(Item => {
					this.fileList1.push({ url: Item });
				});
			}

			this.cover = res.data.cover;
		},
		success(index, list) {
			this.cover = index.url;
		},
		success1(index, list) {
			this.content_img.push(index.url);
		},
		confirmSelection(e) {
			this.classification = this.selectorObj[e[0]].name;
			this.fid = this.selectorObj[e[0]].id;
		},
		openPiker() {
			this.show = true;
		},
		/* 店铺添加商品 */
		async addingGoods(i) {
			this.isLoading = true;
			var _this = this;
			setTimeout(function() {
				_this.isLoading = false;
			}, 1000);
			if (!this.fid) return uni.$showMsg('请选择分类 !');
			if (!this.name) return uni.$showMsg('请输入设备名称 !');
			if (!this.price) return uni.$showMsg('请输入商品价格 !');
			if (!this.lineation) return uni.$showMsg('请输入划线价格 !');
			if (!this.brief) return uni.$showMsg('请输入简介 !');
			if (!this.content) return uni.$showMsg('请输入详情 !');
			if (!this.inventory) return uni.$showMsg('请输入库存 !');
			if (!this.cover) return uni.$showMsg('请上传封面图 !');
			if (!this.content_img) return uni.$showMsg('请上传详情图 !');
			uni.$showLoading();
			let obj = {
				uid: uni.getStorageSync('uid'),
				dj_id: uni.getStorageSync('did'),
				fid: this.fid,
				name: this.name,
				brief: this.brief,
				content: this.content,
				price: this.price,
				lineation: this.lineation,
				cover: this.cover,
				inventory: this.inventory,
				eid: this.id,
				content_img: this.content_img,
			};
			if (i == 1) {
				this.add(obj);
			}
			if (i == 2) {
				this.upd(obj);
			}
		},
		async add(obj) {
			const res = await this.$u.post('api/shop/add_goods', obj, {});
			if (!res.code) return uni.$showMsg();

			uni.$showMsg(res.msg);
			setTimeout(() => {
				uni.navigateBack({
					delta: 1,
				});
			}, 300);
			console.log('res >>  ', res);
		},
		async upd(obj) {
			const res = await this.$u.post('api/shop/update_goods', obj, {});
			if (!res.code) return uni.$showMsg(res.msg);

			uni.$showMsg(res.msg);
			setTimeout(() => {
				uni.navigateBack({
					delta: 1,
				});
			}, 300);
			console.log('res >>  ', res);
		},

		/* 获取分类 */
		async getClassification() {
			let obj = {
				uid: uni.getStorageSync('uid'),
			};
			const res = await this.$u.post('api/shop/goods_type', obj, {});

			this.selectorObj = res.data;
			console.log('获取分类 >>  ', this.selectorObj);
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;
	input {
		padding-left: 20rpx;
	}
	.shop {
		width: 690rpx;
		// height: 282rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 31rpx;
		margin-top: 20rpx;
		text {
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:before {
			content: '*';
			color: #ff0000;
		}
	}

	.info {
		width: 690rpx;
		// height: 450rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 20rpx 31rpx;
		.verificationCd {
			position: relative;
			.countdown {
				position: absolute;

				right: 50rpx;

				width: 110rpx;
				height: 60rpx;
				border-radius: 35rpx;
				//background-color: #007aff;
			}
		}

		.info1,
		.info2,
		.info3,
		.info4,
		.info5 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 120rpx;

			border-bottom: 2rpx solid #f1eded;

			text {
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			text:before {
				content: '*';
				color: #ff0000;
			}

			.inputStyle {
				font-size: 30rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}

	.applyToSettleIn {
		button {
			margin-top: 99rpx;
			width: 690rpx;
			height: 100rpx;
			background: #ff1a14;
			border-radius: 50rpx;

			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
